<template>
<div>
<section id='hot'>
  	<ul>
  		<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/1.jpg">
                  <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='openTime<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">你的名字</h2>
<<<<<<< HEAD
				
=======
							<!-- <div class="vm type-3dimax" v-if="item.showMark == 'IMAX3D'"></div>
							<div class="vm type-imax" v-if="item.showMark == 'IMAX'"></div>
							<div class="vm type-3d" v-if="item.showMark == '3D'"></div> -->
>>>>>>> e7617aa47937d6a0a7547f5c8938bb8805ae057b
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${9.4*10}%`}" ></div>
							<span class="score pa">9.4</span>
						</div>
						<p>所有的相遇，都是久别重逢</p>
						<p>上白石萌音,佟心竹,神木隆之介,皇贞季,长泽雅美,市原悦子</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 

         <!-- 第二个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/2.jpg">
                  <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='openTime<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">血战钢锯岭</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${9.5*10}%`}"></div>
							<span class="score pa">9.5</span>
						</div>
						<p>冲绳之役，成就医疗兵传奇</p>
						<p>安德鲁·加菲尔德,雨果·维文,卢克·布雷西,泰莉莎·帕尔墨,文斯·沃恩,萨姆·沃辛顿</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 
 
       
   <!-- 第3个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/3.jpg">

                   <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='"2016-12-16"<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">长城</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${9.5 * 10}%`}"></div>
							<span class="score pa">9.5</span>
						</div>
						<p>五军战饕餮，中国魂不灭</p>
						<p>马特·达蒙,景甜,佩德罗·帕斯卡,威廉·达福,刘德华,张涵予</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 

     <!-- 第4个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/4.jpg">
                   <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='openTime<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">神奇动物在哪里</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${8.9 * 10}%`}"></div>
							<span class="score pa">8.9</span>
						</div>
						<p>哈利波特外传，魔法世界来袭</p>
						<p>埃迪·雷德梅恩,凯瑟琳·沃特森,艾莉森·苏朵儿,丹·福勒</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 

    <!-- 第5个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/5.jpg">
                   <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='"2016-12-08"<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">28岁未成年</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${9.0* 10}%`}"></div>
							<span class="score pa">9.0</span>
						</div>
						<p>重返17岁，一个身体两个灵魂</p>
						<p>倪妮,霍建华,马苏,王大陆</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 


 <!-- 第6个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/4.jpg">

                   <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='"2016-11-25"<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">萨利机长</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${8.5 * 10}%`}"></div>
							<span class="score pa">8.5</span>
						</div>
						<p>真事改编，空难史生还奇迹</p>
						<p>汤姆·汉克斯,艾伦·艾克哈特,劳拉·琳妮</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 

 <!-- 第7个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/7.jpg">

                   <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='openTime<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">佩小姐的奇幻城堡</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${8.7 * 10}%`}"></div>
							<span class="score pa">8.7</span>
						</div>
						<p>暗黑童话，怪奇孤儿展异能</p>
						<p>伊娃·格林,阿沙·巴特菲尔德,塞缪尔·杰克逊,朱迪·丹奇</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 


 <!-- 第8个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/8.jpg">

                   <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>

  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='"2016-11-11"<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">比利·林恩的中场战事</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${8.3 * 10}%`}"></div>
							<span class="score pa">8.3</span>
						</div>
						<p>李安新作，首部120fps电影</p>
						<p>乔·阿尔文,克里斯汀·斯图尔特,加内特·赫德兰,克里斯·塔克</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 


 <!-- 第9个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/9.jpg">

                   <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='"2016-11-25"<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">海洋奇缘</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${9.0 * 10}%`}"></div>
							<span class="score pa">9.0</span>
						</div>
						<p>土著少女携逗趣半神，扬帆历险</p>
						<p>奥丽依·卡拉瓦霍,道恩·强森,瑞秋·豪斯,特穆拉·莫里森</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 


 <!-- 第10个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/10.jpg">

                   <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='"2016-12-18"<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">我不是潘金莲</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${7.6 * 10}%`}"></div>
							<span class="score pa">7.6</span>
						</div>
						<p>范爷演村姑，申冤二十年</p>
						<p>范冰冰,郭涛,董成鹏,张嘉译,于和伟</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 



 <!-- 第11个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/11.jpg">

                   <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='openTime<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">三少爷的剑</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${8.0 * 10}%`}"></div>
							<span class="score pa">8.0</span>
						</div>
						<p>古龙经典再现荧幕，掀江湖风雨</p>
						<p>林更新,何润东,蒋梦婕,江一燕</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 

 <!-- 第12个图片 -->
     	<li class="border-bottom">   
  			<figure class="m-img ml fl pr">
  				<img src="../../assets/yourname/12.jpg">

                   <!-- 添加一个小的播放按钮 -->
                    <div class="play-icon pa">
  					<img src="../../assets/yourname/0.png">
  				</div>
  			</figure>
			<div class="mr border-bottom">
				<div class="m-buy fr">
					<button class="buy-btn f12" v-if='"2016-11-18"<"2016-12-09"'>购买</button>
					<button class="forward-buy-btn f12" v-else>预售</button>
				</div>
				<a>
					<div class="m-info">
						<div class="m-name">
							<h2 class="f16 tddd vm fl">超级快递</h2>
						</div>
						<div class="full-star pr">
							<div class="score-start" :style="{width: `${8.8 * 10}%`}"></div>
							<span class="score pa">8.8</span>
						</div>
						<p>中国快递员，PK法国跑酷之父</p>
						<p>陈赫,宋智孝,大卫·贝尔,肖央</p>
					</div>
				</a>		
			</div>
			<div class="f13 m-act">
				<span class="border-right">1212五折狂欢</span>
				<span class="tddd">1212特惠抢票，名额有限抢完即止</span>
			</div>
  		</li> 


  	</ul>
  </section>
</div>
</template>

<script>
import {mapGetters} from 'vuex'
import { mapMutations } from 'vuex'
export default {
    name:'hot',
    props: {
    'hotLists': {
  		type: Array,
  		default: () => []
  	}
    },
    data() {
        return {
            limit: 20,
            total: 0,
            offset: 0,
            comingLists:[],
            loaingLists :[],
            hotLists:[],
            openTime:'2016-12-02',
            // openTime2:'',
            // operTime3:'',
            // operTime4:'',
            // operTime8:,
            // openTime10:''
            
        };
    },
  computed: mapGetters([
    'hotLists'
  ]),
    created() {

    },
    mounted() {
       this.getmoives()
    },
    watch: {

    },
    methods: {
    // ...mapMutations(['playVideo']),
   

   async getmoives() {
    let url = '/movie/hot/?city=bj';
    let data=  await this.$axios.get(url)
    console.log(data);

    let lists = data.data.data.returnValue
    console.log(lists);
    
    //模拟索引数据的id号
      lists.forEach((item, index) => {
        item.mID = index  
      })
      this.loaingLists = lists
      this.total = data.total
    // //   this.comingLists = this.sortComingData(lists)
      this.comingLists.push(lists)
      this.offset = this.offset + this.limit
    },
       
   
}
}
</script>

<style>
#hot {
	padding-left: 15px;
	box-sizing: border-box;
	margin-bottom: 10px;
	background: #fff;
}
#hot li {
	padding-top: 15px;
}
.m-img {
	width: 65px;
	height: 90px;
}
/* .m-img img {
	opacity: 0.7;
	transition: opacity .7s ease-in;
} */
.m-img img,
.play-icon img {
	width: 100%;
	height: 100%;
}
.play-icon {
	width: 17px;
	height: 17px;
	left: 50%;
	top: 50%;
	margin-left: -8.5px;
	margin-top: -8.5px;
	/* display: none; */
}
.m-act,
.mr {
	margin-left: 76px;
}
.m-act {
	margin-right: 15px;
}
.mr {
	padding: 0 15px 23px 0;
	box-sizing: border-box;
}
.m-buy {
	margin-top: 30px;
}
.buy-btn,
.forward-buy-btn {
	height: 24px;
	width: 45px;
	line-height: 20px;
	text-align: center;
	background-color: #fff;
	outline: none;
	border-radius: 3px;
	font-weight: bold;
}
.buy-btn {
	border: 1px solid #ff4d64;
	color: #ff4d64;
}
.forward-buy-btn  {
	border: 1px solid #37b7ff;
	color: #37b7ff;
}
.full-star {
	margin-top: 7px;
  width: 50px;
  height: 10px;
  background-size: auto 100%;
  background-image: url('../../assets/images/nostart.svg');
}
.score-start {
	width: 100%;
	height: 100%;
	background-size: auto 100%;
	background-image: url('../../assets/images/star.svg');
}
.score {
	right: -21px;
	top: -1px;
	font-size: 10px;
	color: #9c9c9c;
}
.m-info {
	margin-right: 50px;
}
.m-info h2 {
	margin-top: 3px;
	max-width: 68%;
	display: inline-block;
}
.m-info span {
	display: inline-block;
}
.m-info p:nth-of-type(1) {
	margin-top: 12px;
}
.m-info p:nth-of-type(2) {
	margin-top: 6px;
}
.m-info p {
	font-size: 13px;
	color: #9c9c9c;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
    text-align: left;
}
.m-act {
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin-top: 8px;
	padding-bottom: 8px;
}
.m-act span:first-child {
	color: #fea54c;
}
.m-act span:last-child {
	color: #9c9c9c;
	text-indent: 8px;
}
.m-act span {
	box-sizing: border-box;
	width: 50%;
	display: inline-block;
}
.m-name {
	height: 20px;
	color: #333;
}
.type-3d {
	margin-top: 5px;
	width: 17px;
  height: 17px;
	background-image: url('../../assets/images/3d.svg');
}
.type-imax {
	margin-top: 5px;
	width: 27px;
  height: 15px;
	background-image: url('../../assets/images/imax.svg');
}
.type-3dimax {
	margin-top: 5px;
	width: 45px;
	height: 17px;
	background-image: url('../../assets/images/3dimax.svg');
}
.type-3d,
.type-imax,
.type-3dimax {
	margin-left: 5px;
	background-size: 100%;
	background-repeat: no-repeat;
	float: left;
}
</style>
